<template>
	<el-dialog v-model="props.show" width="500" title="定期存入" close-icon="CloseBold" @close="close">
		<template #default>
			<div>
				<p class="mt-10px mb-10px">数量</p>
				<div class="flex items-center text-18px border-1px border-solid rounded-10px border-#E5E6EB p-10px">
					<el-input placeholder="最小可投0.22USDT">
					</el-input>
					<p class="mr-10px ml-10px">USDT</p>
					<p class="whitespace-nowrap text-#114CEE">最大</p>
				</div>
				<div class="mt-10px flex items-center text-12px">
					<span class="text-#86909C">可用：</span>
					<span class="ml-10px mr-10px">0.00USDT</span>
					<img src="/transaction/spot/add-blue-fill.svg" @click="showAccountDeposit = true" />
				</div>
				<div class="text-#86909C text-12px mt-10px">
					<p class="text-#000000 text-14px">申购数量限制</p>
					<div class="flex items-center justify-between mt-10px">
						<p>最小可投</p>
						<p>0.22 USDT</p>
					</div>
					<div class="flex items-center justify-between  mt-10px">
						<p>剩余可投</p>
						<p>0.22 USDT</p>
					</div>
				</div>
				<div class="text-#86909C text-12px mt-10px">
					<p class="text-#000000 text-14px">概览</p>
					<div class="p-20px bg-#F6F6F6 rounded-8px">
						<div class="h-100px">
							<el-steps direction="vertical" :active="4" class="step-financing-row">
								<el-step>
									<template #icon>
										<img src="/financing/step.svg" class="relative top--10px" />
									</template>
									<template #title>
										<div class="flex items-center justify-between text-12px relative top--10px">
											<p class="text-#86909C">#86909C</p>
											<p class="text-#000000">2023-04-02 12:00</p>
										</div>
									</template>
								</el-step>
								<el-step>
									<template #icon>
										<img src="/financing/step.svg" class="relative top--10px" />
									</template>
									<template #title>
										<div class="flex items-center justify-between text-12px relative top--10px">
											<p class="text-#86909C">#86909C</p>
											<p class="text-#000000">2023-04-02 12:00</p>
										</div>
									</template>
								</el-step>
								<el-step>
									<template #icon>
										<img src="/financing/step.svg" class="relative top--10px" />
									</template>
									<template #title>
										<div class="flex items-center justify-between text-12px relative top--10px">
											<p class="text-#86909C">#86909C</p>
											<p class="text-#000000">2023-04-02 12:00</p>
										</div>
									</template>
								</el-step>
								<el-step>
									<template #icon>
										<img src="/financing/step.svg" class="relative top--10px" />
									</template>
									<template #title>
										<div class="flex items-center justify-between text-12px relative top--10px">
											<p class="text-#86909C">#86909C</p>
											<p class="text-#000000">2023-04-02 12:00</p>
										</div>
									</template>
								</el-step>

							</el-steps>
						</div>
						<div class="flex items-center justify-between">
							<p>期限</p>
							<p class="text-#000000">7天</p>
						</div>
						<div class="flex items-center justify-between  mt-10px">
							<p>预计年化收益率</p>
							<p class="text-#000000">3.5%</p>
						</div>
						<div class="flex items-center justify-between  mt-10px">
							<p>预计到账收益</p>
							<p class="text-#07B175">
								0.00 USDT
							</p>
						</div>
					</div>
				</div>
				<div class="mt-20px">
					<el-button type="primary" color="#114CEE" style="width: 100%;height:50px;font-size:18px;"
						@click="showResultRegular = true">确认</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
	<AccountDeposit :show="showAccountDeposit" @close="closeAccountDeposit"></AccountDeposit>
	<ResultRegular :show="showResultRegular" @close="closeResultRegular"></ResultRegular>
</template>
<script lang="ts" setup>
import AccountDeposit from './AccountDeposit.vue';
import ResultRegular from './ResultRegular.vue';
import { ref } from 'vue';

interface IProps {
	show: false;
}
const showAccountDeposit = ref<boolean>(false);
const closeAccountDeposit = (val: boolean) => {
	showAccountDeposit.value = val;
};

const showResultRegular = ref<boolean>(false);

const closeResultRegular = (val: boolean) => {
	showResultRegular.value = val;
};

const props = defineProps<IProps>();

const emits = defineEmits(['close']);

const close = () => {
	emits('close', false);
};

</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
	color: #86909C;
	font-size: 18px;
}

::v-deep .is-active {
	color: #000000;
}

::v-deep .el-tabs__nav-wrap:after {
	display: none;
}

::v-deep .el-input,
::v-deep .el-input__wrapper {
	border: none !important;
	box-shadow: none !important;
	font-size: 18px;
}
</style>
<style lang="scss">
.step-financing-row {
	.el-step {
		.el-step__main {}
	}

	.el-step__icon {
		background-color: #114cee00;
	}
}
</style>
